<template>
<div>
    <title-bar title="残差直方图"></title-bar>
    <ve-histogram :colors="['#3F9EFF']" :extend="extend" :data-empty="chartData.rows.length===0" :legend-visible="false" width="100%" height="400px" :data="chartData" :settings="chartSettings"></ve-histogram>
</div>
</template>

<script>
import TitleBar from '@/components/TitleBar'
import {
    mapGetters
} from 'vuex'
export default {
    name: 'VisualDisplay',
    components: {
        TitleBar
    },
    computed: {
        ...mapGetters({
            modelDetail: 'common/getModelDetail'
        })
    },
    data () {
        return {
            extend: {
                grid: {
                    y: 30,
                    left: '100px',
                    right: '100px'
                },
                series: {
                    showSymbol: false,
                    label: { show: false, position: 'top' }
                },
                xAxis: {
                    axisLabel: {
                        interval: 0,
                        rotate: 30
                    },
                    axisTick: {
                        show: true,
                        inside: true,
                        lineStyle: {
                            color: '#3F9EFF'
                        }
                    },
                    nameLocation: 'end'
                },
                dataZoom: [
                    {
                        show: true,
                        showDetail: false,
                        start: 0,
                        end: 100,
                        height: 15
                    },
                    {
                        type: 'inside',
                        showDetail: false,
                        start: 0,
                        end: 100
                    }
                ]
            },
            index: 0,
            chartSettings: {
                type: 'histogram',
                xAxisType: 'category',
                yAxisName: ['Frequency'],
                xAxisName: ['MAE']
            },
            chartData: {
                columns: [],
                rows: []
            }
        }
    },
    created () {
        this.init()
    },
    methods: {
        init () {
            let rows = this.modelDetail.summary.evaSummary.errHistogram
            this.chartData = {
                columns: ['error', 'frequency'],
                rows
            }
            // this.dataZoom[0].end = rows.length > 16 ? parseInt(1600 / rows.length) : 100
        }
    }
}
</script>
